<!-- My Bots -->
<!-- Author: Edwin -->
<template>
  <el-card shadow="never"
           class="aui-card--fill">
    <add-or-update v-if="addOrUpdateVisible"
                   ref="addOrUpdate"
                   @refreshDataList="getDataList"></add-or-update>
    <div>
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary"
                     size="small"
                     @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
        </el-form-item>
      </el-form>
      <div class="control-section">
        <div class="content-wrapper"
             v-loading="loading">
          <ejs-grid :dataSource="comDataList"
                    :allowResizing='gridDefaultSetting.allowResizing'
                    :allowFiltering='gridDefaultSetting.allowFiltering'
                    :filterSettings='gridDefaultSetting.filterSettings'
                    :allowGrouping='true'
                    :allowPaging='true'
                    :toolbar="gridDefaultSetting.toolbar"
                    :allowTextWrap="gridDefaultSetting.allowTextWrap"
                    :showColumnChooser='gridDefaultSetting.showColumnChooser'
                    :allowReordering='gridDefaultSetting.allowReordering'
                    :allowSorting='true'
                    :editSettings='editSettings'
                    v-loading='dataListLoading'
                    ref="grid"
                    class="sortingenabled"
                    style="margin-top: 30px;"
                    :selectionSettings='gridDefaultSetting.selectOptions'
                    :commandClick='commandClick'
                    :rowSelected='dataListSelectionChangeHandle'
                    :pageSettings='pageSettings'
                    :showColumnMenu='gridDefaultSetting.showColumnMenu'>
            <e-columns>
              <e-column field='name'
                        :headerText="$t('custom.botStore.name')"
                        :width='120'></e-column>
              <e-column field='version'
                        :headerText="$t('custom.botStore.version')"
                        :width='80'></e-column>
              <e-column field='description'
                        :headerText="$t('custom.botStore.description')"
                        :width='120'></e-column>
              <e-column field='createTime'
                        :headerText="$t('custom.botStore.createTime')"
                        :width='80'
                        :template='CreateTimeFormat'></e-column>
              <e-column field='updateTime'
                        :headerText="$t('custom.botStore.updateTime')"
                        :width='80'
                        :template='UpdateTimeFormat'></e-column>
              <e-column :width='80'
                        :commands='commands'>
              </e-column>
            </e-columns>
          </ejs-grid>

        </div>
      </div>
    </div>
    <BotDialog ref="bot-dialog" />
  </el-card>
</template>
<script>
import mixinViewModule from '@/mixins/crud-view-modul-plus'
import AddOrUpdate from './add-or-update'
import CreateTimeFormat from './FormatComponents/CreateTimeFormat'
import UpdateTimeFormat from './FormatComponents/UpdateTimeFormat'
import { LinkComponent } from './FormatComponents/LinkComponent.js'
import BotDialog from '../../bots/bot-view/index'
import { deleteBotInfoApi } from '@/api/new'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/web/bots/sys/bot/list',
        getDataListIsPage: false
      },
      dataForm: {

      },
      scope: [],
      loading: false,
      commands: [
        {
          type: 'Edit',
          buttonOption:
          {
            content: this.$t('custom.bots.editbtn'),
            cssClass: 'e-outline e-small e-primary'
          }
        },
        {
          type: 'Delete',
          buttonOption:
          {
            content: this.$t('custom.bots.deletebtn'),
            cssClass: 'e-outline e-small e-danger'
          }
        },
        {
          type: 'Design',
          buttonOption: {
            content: this.$t('custom.bots.designbtn'),
            cssClass: 'e-outline e-small e-success'
          }
        }
      ],
      editSettings: {
        allowDeleting: false,
        allowAdding: false,
        mode: 'Cell'
      },
      pageSettings: { pageSize: 100, pageSizes: [50, 100, 200, 1000], pageCount: 4 },
      CreateTimeFormat: function () {
        return { template: CreateTimeFormat }
      },
      UpdateTimeFormat: function () {
        return { template: UpdateTimeFormat }
      }
    }
  },
  components: {
    AddOrUpdate, BotDialog
  },
  props: {

  },

  computed: {
    comDataList () {
      var retdata = []
      retdata = this.dataList
      return retdata
    }
  },
  created () {
    this.init()
    LinkComponent.$on('initPageList', () => {
      this.getDataList()
    })
  },
  methods: {
    init () {

    },
    commandClick (e) {
      if (e.commandColumn.type === 'Edit') {
        this.addOrUpdateHandle(e.rowData.id)
      }
      if (e.commandColumn.type === 'Delete') {
        this.deleteHandle(e.rowData.id)
      }
      if (e.commandColumn.type === 'Design') {
        this.designHandle(e.rowData.id)
      }
    },
    deleteHandle (e) {
      const params = {
        id: e
      }
     deleteBotInfoApi(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.getDataList()
        return this.$message.success(res.msg)
      })
    },
    designHandle (id) {
      // this.$refs['bot-dialog'].openDialog(id)
      this.$router.push({ name: 'mspbots-bots-bot-view-index', query: { botId: id } })
    }

  }
}
</script>
<style scoped>
.content-wrapper ::v-deep .sortingenabled {
  margin-top: 30px;
}
.e-grid .e-columnheader.e-wrap .e-fltr-icon .e-sortfilterdiv,
.e-grid.e-wrap .e-columnheader .e-fltr-icon .e-sortfilterdiv {
  margin: -28px 8px -29px 0;
}
</style>
